import { useEffect, useMemo, useRef, useState } from "react";
import { Button } from 'antd'
// import microApp from '@micro-zoe/micro-app'

import { useRouter, useSearchParams } from "@/router/hooks";
import styled from "styled-components";
import CodeEditor from "@/components/codemirror/CodeEditor";

const { sendMessageToApp, notification } = window.MFE
console.log(window.MFE, 'window.MFE === ');


const MicroHome = () => {
  const searchParams = useSearchParams()



  const initMicro = () => {
    searchParams.forEach((value, key) => {
      if (key.includes('micro-app--')) {
        setRightShow(true)
        setPanelSize('50%')
      }
    })
  }

  const sendMessage = (name) => {
    console.log('sendMessage', name);
    // to、from传子应用的标识，其他自行添加
    sendMessageToApp({ to: name, from: 'micro-app1', type: 'message', data: '这是应用1发送来的消息' })
  }
  const notify = (data) => {
    notification(data)
  }

  const code = `
  const { sendMessageToApp } = window.MFE
  sendMessageToApp({ to: 'app2', from: 'app1', type:'message', data: '这是应用1发送来的消息' })
  `
  const code2 = `
  const { sendMessageToApp } = window.MFE
  sendMessageToApp({ to: 'app3', from: 'app1', type:'message', data: '这是应用1发送来的消息' })
  `
  const code3 = `
  const { notification } = window.MFE
  /**
   * type: success | error | info | warning
   * message: 提示内容
   * duration: 持续时间，单位秒，默认 5
  */
  notification({type:'success', message: '成功提示', duration: 5})
  notification({type: 'error', message: '错误提示', duration: 5})
  notification({type: 'info', message: '信息提示', duration: 5})
  notification({type: 'warning', message: '警告提示', duration: 5})
  `
  useEffect(() => {
    initMicro()
    return () => {
      // microApp.removeDataListener('micro-large-screen')
    }
  }, [])

  return <StyleWrap>
    <p>应用1</p>
    <Button type="primary" onClick={() => sendMessage('micro-app2')}>发消息给应用2</Button>
    <div>示例代码</div>
    <CodeEditor value={code} height={'150px'} lang="json" readOnly />
    <Button type="primary" onClick={() => sendMessage('micro-app3')}>发消息给应用3</Button>
    <div>示例代码</div>
    <CodeEditor value={code2} height={'150px'} lang="json" readOnly />
    <Button type="primary" style={{ margin: '10px' }} onClick={() => notify({ type: 'success', message: '成功提示' })}>成功提示</Button>
    <Button type="primary" style={{ margin: '10px' }} onClick={() => notify({ type: 'error', message: '错误提示' })}>错误提示</Button>
    <Button type="primary" style={{ margin: '10px' }} onClick={() => notify({ type: 'info', message: '信息提示' })}>信息提示</Button>
    <Button type="primary" style={{ margin: '10px' }} onClick={() => notify({ type: 'warning', message: '警告提示' })}>警告提示</Button>
    <CodeEditor value={code3} height={'300px'} lang="json" readOnly />
  </StyleWrap>;
}

const StyleWrap = styled.div`
  p {
    font-size: 20px;
    color: #fff;
    width: 100%;
    text-align: center;
  }
`
export default MicroHome;